<template>
  <a-modal
      :title="title"
      :width="800"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :footer="null"
      cancelText="关闭"
  >
    <table id="table_report" class="table table-striped table-bordered table-hover">
      <tr>
        <td style="width:90px;text-align: right;padding-top: 85px;">基本信息:</td>
        <td>
          <p style="float: left;">
            停车场名称：<span id="parkName">
              {{ result.parkName }} </span
          ><br/>

            车牌号：<span id="plateNo">
              {{ result.plateNo }} </span
          ><br/>

            车辆类型：<span id="carType" v-text="custCarType(result.carType)">
              {{ result.carType }} </span
          ><br/>

            车辆性质：<span id="carNature" v-text="custCarNature(result)">
              {{ result.carNature }} </span
          ><br/>

            车辆进场时间：<span id="carEnterTime">
              {{ result.carEnterTime }} </span
          ><br/>

            车辆状态：<span id="isOut" v-text="custIsOut(result.isOut)">
              {{ result.isOut }} </span
          ><br/>

            创建时间：<span id="createTime">
              {{ result.createTime }} </span
          ><br/>

            抓拍图片：<span id="imgPath">
              <img
                  style="max-width:55px;max-height:55px;min-height:20px;min-width:20px;text-align:center;cursor:pointer;border:1px #BFBFBF solid;padding: 2px 2px 2px 2px;background-color:white;"
                  v-if="result.imgPath != null"
                  preview
                  :src="result.imgPath"
              />
            <!-- <img v-if="result.imgPath != null" preview :src="result.imgPath"  /> --> </span
          ><br/>
          </p>
        </td>
      </tr>

      <tr>
        <td style="width:90px;text-align: right;padding-top: 70px;padding-bottom: 70px">设备详情:</td>
        <td>
          <p style="float: left;">
            车场编号：<span id="parkCode">
              {{ result.parkCode }} </span
          ><br/>
            设备序列号：<span id="serialNo">
              {{ result.serialNo }} </span
          ><br/>

            <span id="armCode" v-show="result.armCode">入口编号：{{ result.armCode }} </span><br v-show="result.armCode"/>

            入口名称：<span id="armName">
              {{ result.armName }} </span
          ><br/>
            备注：<span id="remark">
              {{ result.remark }} </span
          ><br/>

            <span id="ipAddr" v-show="result.ipAddr">设备ip地址：{{ result.ipAddr }} </span><br v-show="result.ipAddr"/>

            更新时间：<span id="updateTime">
              {{ result.updateTime }} </span
          ><br/>
          </p>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;" colspan="10">
          <a-button type="primary" @click="close">关闭</a-button>
        </td>
      </tr>
    </table>
  </a-modal>
</template>

<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import VuePreview from 'vue-preview'

export default {
  name: 'zombieCarModal',
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      result: {},
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/parking/zombieCar/add',
        edit: '/parking/zombieCar/edit'
      }
    }
  },
  created() {
  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record) {
      Object.assign(this.result, record)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          //时间格式化
          formData.updateTime = formData.updateTime ? formData.updateTime.format('YYYY-MM-DD HH:mm:ss') : null

          httpAction(httpurl, formData, method)
              .then(res => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.confirmLoading = false
                that.close()
              })
        }
      })
    },
    handleCancel() {
      this.close()
    },

    custCarType(t) {
      if (t === 0 || t === '0') {
        return '无牌车'
      } else if (t === 1 || t === '1') {
        return '有牌车'
      } else {
        return t
      }
    },
    custCarNature(t) {
      if (t.carNature === 0 || t.carNature === '0') {
        if(t.carTypeNo ==="-1" || t.carTypeNo === -1){
          return "内部车";
        }
        return '临时车'
      } else if (t.carNature === 1 || t.carNature === '1') {
        return '月租车'
      } else if (t.carNature === 2 || t.carNature === '2') {
        return '储值车'
      } else if (t.carNature === 3 || t.carNature === '3') {
        return '军警车'
      }
    },
    custIsOut(t) {
      if (t === 0 || t === '0') {
        return '未出场'
      } else if (t === 1 || t === '1') {
        return '已出场'
      } else {
        return t
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
